import React, { useState } from 'react';
import { Button, Modal, Space } from 'antd';
import { PlusOutlined } from '@ant-design/icons';

interface AddTaskButtonProps {
  buttonStyle?: React.CSSProperties;  // 允许自定义按钮样式[3](@ref)
  onSuccess?: () => void;             // 提交成功回调[5](@ref)
}

const AddTaskButton: React.FC<AddTaskButtonProps> = ({
  buttonStyle,
  onSuccess
}) => {
  const [isOpen, setIsOpen] = useState(false);

  const showModal = () => setIsOpen(true);
  const handleCancel = () => setIsOpen(false);
  
  const handleSubmit = () => {
    setIsOpen(false);
    onSuccess?.(); // 触发回调[5](@ref)
  };

  return (
    <>
      <Button
        type="primary"
        icon={<PlusOutlined />}
        onClick={showModal}
        style={buttonStyle}
      >
        添加任务
      </Button>

      <Modal
        title="新建任务"
        open={isOpen}
        onOk={handleSubmit}
        onCancel={handleCancel}
        okText="提交"
        cancelText="取消"
        width={600}
        destroyOnClose
      >
        {/* 表单区域预留 */}
        <div style={{ padding: '24px 0' }}>
          <Space direction="vertical" style={{ width: '100%' }}>
            {/* 后续可添加表单字段 */}
            <p style={{ textAlign: 'center', color: 'rgba(0,0,0,0.4)' }}>
              任务表单开发中...
            </p>
          </Space>
        </div>
      </Modal>
    </>
  );
};

export default AddTaskButton;
